<template>
    <div>
        {{ str }} --- {{ num }}
        <!-- <button @click="add">+1</button> -->
        <button v-on:click="add(2)">+2</button>
        <button @click="num--">-1</button>
        <div>{{ str }}</div>
        <a v-bind:href="url" target="_blank">{{ name }}</a>
        <!--标签的属性 动态绑定类名-->
        <!--语法糖-->
        <img :src="imgUrl" />
    </div>
</template>
<script setup>
import { ref } from 'vue'

let num = ref(10)

let str = 'hello'

//链接的地址是动态的/从后台获取到的
let name = ref('百度一下')
let url = ref('https://www.baidu.com')
let imgUrl = ref('https://img1.baidu.com/it/u=1165712755,4151842884&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=354')
// let add = () => {
//     num.value++
// }
function add(a) {
    num.value += a
}
</script>
<style scoped></style>